<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import axios from "axios";
import TopMain from "@/1-topBar/topMain.vue";
import LocalBottom from "@/1-classify/local-bottom.vue";
import details3 from "@/1-home/details3.vue";
const route = useRoute();
console.log("inputText:" + route.query.inputText)
const inputText = route.query.inputText;
let detailList2= ref([]);
onMounted(() => {
  axios.get("http://localhost:8080/detail/lookforDetail1Byname/" + inputText).then((res) => {
    detailList2.value = res.data;
  })
})
</script>
<template>
  `<top-main></top-main>
  <div class="body1">
<div class="left">
  <div class="div2"  v-for="(item, index1) in detailList2" :key="index1">
    <div style="display:flex" @click="$router.push('/introduce?id='+item.id)">
      <details3 v-if="index1 % 2 === 0" :t1=item.name :t2=item.address :t3=item.time :t4=item.price
                :t5=item.photo></details3>
    </div>
  </div>
</div>
    <div class="right">
      <div class="div2"  v-for="(item, index1) in detailList2" :key="index1">
        <div style="display:flex" @click="$router.push('/introduce?id='+item.id)">
          <details3 v-if="index1 % 2 === 1" :t1=item.name :t2=item.address :t3=item.time :t4=item.price
                    :t5=item.photo></details3>
        </div>
      </div>
    </div>

  </div>
  <div  class="t10">暂无更多搜索结果</div>
  <local-bottom></local-bottom>
</template>

<style scoped lang="scss">
.body1{
  width: 60%;
  background: white;
  margin: auto;
  height: 100%;
  display: flex;
}
.left{
  //background: aqua;
  width: 50%;
  height: 100%;
}
.right{
  //background: red;
  width: 50%;
  height: 100%;
}
.div1{
  width: 40%;
//display: flex;
  //background: #2c3e50;

}
.div2{
  width: 50%;
  height: 100%;
  //margin: auto;
  margin-top: 30px;
  //background: #2c3e50;
}
.t10{
  width: 60%;
  background: white;
  margin: auto;
  height: 100%;
  margin-top: 30px;
  font-size: 20px;
}
</style>